/**
 * Created by seeker910 on 2014/8/28.
 * @description 组件名称命名约定：继承container组件，名称以ViewPart结尾;继承control组件，名称以Part结尾
 * 广告 控件 
 * 广告的形态：图片 + url + 文字，高度 + 宽度
 */
Rsd.define('Rsd.hermit.sections.AdsViewPart', {
    extend: 'Rsd.container.Component',
    requires: [
        'Rsd.form.Image',
        'Rsd.form.Text',
        'Rsd.form.Button',
        'Rsd.control.HtmlBox'
    ],
    xtype: 'ads-view',
    header: false,
    /**
     * @description 标识该组件是否允许编辑
     */
    domEditable: true,
    /**
     * @description true:表示只允许在模板中修改
     */
    editInMaster:false,
    layout: 'fit',
    height: 250,
    width: '100%', 
    /**
     * 布局子元素
     */
    items: [
        {
            xtype: 'html-box',
            label: false,
            floating: true,
            // height: '30%',
            // width: '50%',
            handler: 'btn_go_target'
        },
        {
            xtype: 'input',
            inputType: 'button',
            label: false,
            floating: true,
            hidden: true,
            width: 140,
            text: 'SHOP NOW',
            handler: 'btn_go_target'
        }
    ],
    /**
     * 数据源schema
     */
    schema: {
        type: 'object',
        title: '图文广告',
        for:'dataSource',//只适配dataSource属性
        properties: {
            link: {
                type: 'object',
                title: '链接',
                $ref: 'link',
                properties:{
                    url:{
                        type: 'string',
                        xtype: 'link-selector',
                        title: 'Url地址',
                        default: '',
                        
                    },
                    target:{
                        type: 'string',
                        xtype: 'combobox',
                        title: '打开位置',//	  
                        enum:[
                            {text:'当前页面',value:'_self'},
                            {text:'新窗口',value:'blank'}
                        ],
                        default: '_self', 
                    },
                    "spm": {
                        //Site Promotion Management（网站推广管理）
                        type: 'string',
                        xtype: 'promotion-selector',
                        title: '推广码',
                        default: ''
                    }
                }
                
            },
            html:{
                type: 'object',
                title: 'HTML',
                $ref:'html',
                properties:{
                    content:{
                        type: 'string',
                        xtype: 'label',
                        mulitiLine:true,
                        height: 150,
                        title: '代码片段',
                        default: '',
                        $ref: 'html'
                    },
                    style: {
                        type: 'object',
                        xtype: 'label',
                        title: '样式',
                        "$ref": "style"
                    }
                }
            },
            image: {
                type: 'object',
                title: '背景图片',
                properties: {
                    "src": {
                        type: 'string',
                        xtype: 'image',
                        title: '图片',
                        default: '',
                        $ref: 'image'
                    },
                    "size": {
                        type: 'string',
                        xtype: 'combobox',
                        title: '大小',
                        enum:[
                            {text:'铺满(比例不变)',value:'cover'},
                            {text:'缩放(比例不变)',value:'contain'},
                            {text:'图像原始大小',value:'auto'},
                            {text:'从其父元素继',value:'inherit'},
                            {text:'默认值',value:'initial'}
                        ],
                        default: 'cover'
                    },
                    "position": {
                        type: 'string',
                        xtype: 'combobox',
                        title: '位置', 
                        enum:[ 
                            {text:'居中',value:'center center'},
                            {text:'居中-靠左',value:'center left'},
                            {text:'居中-靠右',value:'center right'},
                            {text:'顶部-靠左',value:'top left'},
                            {text:'顶部-居中',value:'top center'},
                            {text:'顶部-靠右',value:'top right'},
                            {text:'底部-靠左',value:'bottom left'},
                            {text:'底部-居中',value:'bottom center'},
                            {text:'底部-靠右',value:'bottom right'}
                        ],
                        default: 'center center'
                    }
                }
            }, 
            button: {
                type: 'object',
                title: '按钮',
                properties: {
                    "text": {
                        type: 'string',
                        title: '文 字',
                        default: ''
                    }, 
                     "visible": {
                        type: 'boolean',
                        xtype:'checkbox', 
                        mode:'check',
                        title: '是否显示',
                        default: false
                    }, 
                    style: {
                        type: 'object',
                        xtype: 'label',
                        title: '样式',
                        "$ref": "style"
                    }

                }
            }
        },
        /**
         * 视图模板，可以为一个schmea 定义多个试图
         */
        viewTemplate:{
            'listItemEditView':{
                xtype:'html-box',
                header:false,
                margin: '10px 2% 0 2%',
                width: '95%',
                height: 190,
                labelTagName: 'img',
                label: {
                    content: '{{=dataSource.image.src}}',
                    height: 'auto', 
                    width: 160,
                    position: 'left',
                    style:{
                        maxHeight:'100%'
                    }
                },
                key:"{{=id}}",
                html:'{{=dataSource.html.content}}'
            }
        }
    },
    /**
     * { 
     * link:{url:'http://www.website.com/target',spm:''},
     * html:'this is a picture',
     * image:{
     *      src:'http://image.website.com/imagefile',
     *      size:'cover',
     * },
     * button:{
     *  top:'',
     *  left:'',
     *  style:{}
     * }, 
     * 
     * }
     */
    dataSource: {},
    /**
     * 
     * @param {*} config 
     */
    constructor: function AdsPart(config) {
        config = config || {};
        Rsd.apply(this, config); 
    },
    /**
     * 
     */
    onAfterInit: function onAfterInit() {

        this.style = Rsd.apply(this.style || {}, {
            position:'relative',
            overflow: 'hidden',
            maxWidth: '100%',
            maxHeight: '100%',
            height: '100%',
            width: '100%',
            backgroundSize: 'contain',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
        });

        this.callParent();
    },
    /**
     * 
     */
    onAfterRender: function onAfterRender() {
        this.callParent();
        var me = this;
        if (this.dataSource && this.dataSource.button && this.dataSource.button.visible !== false) {

            setTimeout(function () {
                me.items[1].show();
            }, 1000);

        }
    },
    /**
     *  
     * html:'this is a picture',
     * imageUrl:'http://image.website.com/imagefile',
     * imageSize:'cover',
     * link:'http://www.website.com/target'
     * 
     * @param {*} data 
     */
    loadData: function loadData(data) {

        var _data = data || this.dataSource || {};
        if(Rsd.isEmpty(_data))
        {
            return;
        }
        this.dataSource = _data;
        _data.link = _data.link||{url:'',target:'_self'};
        _data.button = _data.button||{text:'',visible:false};
        _data.image = _data.image||{};

        if(Rsd.isString(_data.link))
        {
            _data.link={url:_data.link,target:'_self'}
        }

        if (Rsd.isString(_data.html)) {
            _data.html = { content: _data.html }
        }
        if (Rsd.isObject(_data.html)) {
            this.items[0].setHtml(_data.html.content || '');
            var _html_style = _data.html.style || {
                left: '10%',
                top: '10%',
                color: 'inherit',
                fontSize: '150%'
            };
            this.items[0].setElStyle('ctrl', _html_style);
        }

        if (Rsd.isString(_data.button)) {
            _data.button = {text: _data.button ,visible:true};
        }
        if (Rsd.isObject(_data.button)) {
               
            this.items[1].setValue(_data.button.text);
            this.items[1].setElStyle('ctrl', _data.button.style); 
            this.items[1].dom.style.visibility = _data.button.visible?'visible':'hidden'
        }
         
        if (Rsd.isString(_data.image)) {
            _data.image = { src: _data.image };
        }

        if (Rsd.isObject(_data.image)) {
            var position = (_data.image.position || 'center center').split(' ');
            this.dom.style.backgroundPositionX = position[0] || 'center';
            this.dom.style.backgroundPositionY = position[1] || 'center';
            this.dom.style.backgroundRepeat = 'no-repeat';
            this.dom.style.backgroundImage = 'url(' + _data.image.src || '' + ')';
            this.dom.style.backgroundSize = _data.image.size || 'cover';
        }

        this.callParent();

    },

    /**
     * 
     */
    btn_go_target: function btn_go_target() {

        if (Rsd.isString(this.dataSource.link)) {
            window.open(this.dataSource.link, '_self');
        }
        if (Rsd.isObject(this.dataSource.link)) {
            window.open(this.dataSource.link.url, this.dataSource.link.target || '_self');
        }
    }
},function(type){

     
});
